<template>
  <view class="top-bar" :style="{'top':height * 2 + 'rpx'}" v-if="isShow">
    <view class="left-tips">
      <image class="icon" :src="icon" mode="widthFix" />
      设备未激活
    </view>
    <view class="right-btn" @click="onBtnClick">
      激活设备 <TnIcon name="right" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose,defineProps } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const isShow = ref()
const icon = ref('../../static/imgs/icons/warning_icon.png')
const props = defineProps({
  height: {
    type: Number,
    defalut: 0,
  },
})
defineExpose({
  show() {
    if (userStore.getIfBindSn === false) {
      isShow.value = true
    }
    else{
      isShow.value = false
    }
  },
})

onLoad(() => {})

const onBtnClick = () => {
	userStore.toScanMate()
}
</script>

<style lang="scss" scoped>
.top-bar {
  z-index: 999;
  width: 100%;
  padding: 18rpx 48rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-items: center;
  left: 0;
  .left-tips {
    height: 40rpx;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    vertical-align: middle;
    .icon {
      width: 32rpx;
      vertical-align: middle;
      margin-top: -8rpx;
    }
  }
  .right-btn {
    border-radius: 20rpx;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 600;
    font-size: 20rpx;
    color: #ffffff;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    width: 138rpx;
    height: 48rpx;
    color: #fff;
    text-align: center;
    line-height: 48rpx;
    background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
  }
}
</style>
